<div class="layui-fluid nepadmin-pad0 nepadmin-mar0 list0 agentlist" id="list" lay-title="代理管理">
    <div class="layui-fluid">
        <div class="layui-row layui-col-space15">
            <div class="layui-col-md12">
                <div class="layui-card hxr-layui-card" id="agentlistv">
                    <div class="layui-form hxradmin-card-header">
                        <div class="layui-form-item">
                            <div class="layui-inline">
                                <label class="layui-form-label">代理用户名</label>
                                <div class="layui-input-inline">
                                    <input type="text" name="user" placeholder="请输入" autocomplete="off"
                                           class="layui-input">
                                </div>
                            </div>
							<div class="layui-inline">
								<label class="layui-form-label" style='width:85px;'>代理添加日期范围</label>
								<div class="layui-input-inline" style="width: 350px;  ">
									<input type="text" name="val2" id='date' autocomplete="off" class="layui-input" readonly>
								</div>
							</div>
                            <div class="layui-inline">
                                <label class="layui-form-label">分组</label>
                                <div class="layui-input-inline">
                                    <div class="layui-unselect layui-form-select">
                                        <div class="layui-select-title"><input @click="groupF" name="group" readonly
                                                                               type="text" placeholder="选择分组"
                                                                               class="layui-input layui-unselect"><i
                                                class="layui-edge"></i></div>
                                        <dl class="layui-anim layui-anim-upbit">
                                            <dd class="layui-select-tips layui-this">选择</dd>
                                            <dd :data='x.group_id' v-for="x in group">{{x.agent_group_name}}</dd>
                                        </dl>
                                    </div>
                                </div>
                            </div>
                            <div class="layui-inline">
                                <label class="layui-form-label">状态</label>
                                <div class="layui-input-inline">
                                    <div class="layui-unselect layui-form-select">
                                        <div class="layui-select-title"><input name="status" type="text"
                                                                               placeholder="请选择状态" value="" readonly
                                                                               class="layui-input layui-unselect"><i
                                                class="layui-edge"></i></div>
                                        <dl class="layui-anim layui-anim-upbit" style="">
                                            <dd lay-value="" class="layui-select-tips layui-this">请选择状态</dd>
                                            <dd data='1'>启动</dd>
                                            <dd data='2'>停用</dd>
                                        </dl>
                                    </div>
                                </div>
                            </div>

                            <div class="layui-inline">
                                <button class="layui-btn" data-type="reload" id="search">搜索</button>
                            </div>
                            <div class="layui-inline">
                                <button class="layui-btn" data-type="excel" id="pexcel">导出数据</button>
                            </div>
                        </div>
                    </div>
                    <div class="layui-card-body">
                        <div>
                            <button class="layui-btn layuiadmin-btn-list" data-type="batchdel">删除</button>
                            <button class="layui-btn layuiadmin-btn-list" data-type="add">添加</button>
                        </div>
                        <table class="layui-hide" id="list-table" lay-filter="list-table"></table>
                        <div id="list-toolbar" style="display: none;">
<!--                            <a class="layui-btn layui-btn-normal layui-btn-xs" lay-event="list"><i-->
<!--                                    class="layui-icon layui-icon-edit"></i>详情</a>-->
                            <a class="layui-btn layui-btn-normal layui-btn-xs" lay-event="choose_schools">负责学校</a>
                            <a class="layui-btn layui-btn-normal layui-btn-xs" lay-event="edit"><i
                                    class="layui-icon layui-icon-edit"></i>编辑</a>
                            <a class="layui-btn layui-btn-danger layui-btn-xs" lay-event="del"><i
                                    class="layui-icon layui-icon-delete"></i>删除</a>
<!--                            <a class="layui-btn layui-btn-normal layui-btn-xs" lay-event="list"><i-->
<!--                                    class="layui-icon layui-icon-delete"></i>代理详情</a>-->
                            <button class="layui-btn layui-btn-normal layui-btn-xs" lay-event="list"><i class="layui-icon-list"></i>详情</button>
                        </div>
                    </div>
                </div>
                <script type="text/html" id="list-tableF">
                    <input type="checkbox" name="status" lay-skin="switch" lay-text="启用|停用" lay-filter="list-tableF"
                           value="{{ d.status }}" data-json="{{ encodeURIComponent(JSON.stringify(d)) }}" {{ d.status==
                           1 ? 'checked' : '' }}>

                </script>
                <script type="text/html" id="sex">
                    {{#  if(d.sex === 1){ }}
                    男
                    {{#  } else if(d.sex === 2) { }}
                    女
                    {{#  } else if(d.sex === 0) { }}
                    保密
                    {{#  } }}
                </script>
                <script type="text/html" id="card_photo">
                    <img style="max-height: 100%;" src="{{layui.conf.url+d.card_photo}}" onclick="previewImg(this)">
                </script>
                <!-- <a href="{{layui.conf.url+d.card_photo}}" target="_blank"></a> -->
                <script type="text/html" id="area">
                    {{d.province_name+'-'+d.citys_name+'-'+d.county_name}}
                </script>
                
                <script type="text/html" id="card_id">
                    【{{d.card_id}}】
                </script>
                
               <script type="text/html" id="institute_name">

 {{#  layui.each(d.institute_name, function(index, item){ }}

    <span style="color: #ff4911">【</span> {{item}} <span style="color: #ff4911">】</span>

  {{#  }); }}
  {{#  if(d.institute_name.length === 0){ }}
    无数据
  {{#  } }}
                </script>
                <!-- 
                {{# $.each(d.institute_name,function(index,value){ }}
   2312313
{{# }); }} -->
            </div>
        </div>
    </div>
</div>
<script>
    var userlist = new Vue({
        el: '#agentlistv',
        data: {
            group: ''
        },
        methods: {
            groupF() {
                if (!this.group) {
                    var _this = this;
                    layui.admin.ajax('agents/get_group_list', {}, 1).then(function (res) {
                        _this.group = res.data.list;
                    });
                }
            }
        }
    });
    var formurl = 'agent/agentform', formarea = ['600px', '600px'];

    //表格数据渲染
    layui.use(['table', 'form', 'laydate'], function () {
        var table = layui.table,
            form = layui.form,
            $ = layui.$,laydate=layui.laydate;
        //日期范围
        laydate.render({
            elem: '#date'
            , type: 'datetime'
            , range: true
        });
        layui.admin.initlist(table, 'agents/list', 275, [
            [{
                type: 'checkbox',
                fixed: 'left'
            }, {
                field: 'agent_id',
                title: 'ID',
                width: 100
            }, {
                field: 'agent_name',
                title: '代理用户名',
                minWidth: 150
            }, {
                field: 'hotel_name',
                title: '酒店/学校',
                minWidth: 180
            }, {
                field: 'agent_group_name',
                title: '代理分组',
                width: 100
            }, {
                field: 'real_name',
                title: '姓名',
                minWidth: 100
            }, {
                field: 'sex',
                title: '性别',
                width: 70,
                templet: '#sex'
            }, {
                field: 'total_income',
                title: '总入账金额(元)',
                width: 130
            }, {
                field: 'blance',
                title: '余额(元)',
                width: 100
            }, {field:'withdraw_proportion',
            title:'佣金比例(%)',
            width:100},{
                field: 'already_drawing',
                title: '已提款金额(元)',
                width: 130
            }, {
                field: 'school_name',
                title: '负责学校',
                width: 150
            }, {
                field: 'tel',
                title: '电话',
                width: 150
            }, {
                field: 'email',
                title: '邮箱',
                width: 150
            }, {
                field: 'card_photo',
                title: '身份证照片',
                width: 100,
                templet: '#card_photo'
            }, {
                field: 'card_id',
                title: '身份证号码',
                width: 200,
                templet: '#card_id'
            }, {
                field: 'area',
                title: '所在区域',
                width: 200,
                templet: '#area'
            }, {
                field: 'address',
                title: '住址',
                width: 150
            }, {
                field: 'login_numer',
                title: '登录次数',
                width: 100
            }, {
                field: 'create_time',
                title: '创建时间',
                width: 200
            }, {
                field: 'status',
                title: '启用/停用',
                width: 100,
                templet: '#list-tableF',
                fixed: 'right'
            }, {
                title: '操作',
                toolbar: '#list-toolbar',
                width: 280,
                fixed: 'right'
            }]
        ]);

        //监听表格表单操作
        form.on('switch(list-tableF)', function (obj) {
            var json = JSON.parse(decodeURIComponent($(this).data('json')));
            json = table.clearCacheKey(json);
            layui.admin.ajax('agents/update', {
                status: json.status == 1 ? 2 : 1,
                agent_id: json.agent_id
            }).then(function (res) {
                layui.admin.ahint(res.code, res.msg);
                layui.table.reload('list-table');
            }).catch(function (res) {
            });
        });

        //监听表格操作事件
        table.on('tool(list-table)', function (obj) {
            var data = obj.data;
            //删除
            if (obj.event === 'del') {
                layer.confirm('确定删除' + data.agent_name + '?', function (index) {
                    layui.admin.delF(table, 'agents/delete', {agent_id: data.agent_id});
                });
            } else if (obj.event === 'edit') { //编辑
                if (data.institute_name){
                    data.institute_name=data.institute_name.join(',');
                }

                layui.admin.pupF('编辑代理', formarea, formurl, 2, data)
            }else if (obj.event==='choose_schools'){

                layui.admin.pupF('负责院系', ['900px', '600px'], 'agent/agent_schools', 2, data)
            }else if(obj.event==='list'){
                layui.admin.agent=data;
                layui.admin.pupF('代理详情', ['1000px','600px'], 'agent/agent_detail.html?v='+Math.random(),2,data);
            }
        });
        //监听行双击事件
        /* table.on('rowDouble(list-table)', function(obj) {
            //查看详情
            if($('.agentlist').length){
                layui.admin.pupF('代理详情', formarea, formurl, 3, obj.data);
            }

        }); */
        var active = {
            //多行删除
            batchdel: function () {
                layui.admin.delsF(table, 'agents/delete', 'agent_id');
            }
            //添加
            ,
            add: function (othis) {
                layui.admin.pupF('添加代理', formarea, formurl, 1, {})
            }
        };
        //操作dom
        $('.layui-btn.layuiadmin-btn-list').on('click', function () {
            var type = $(this).data('type');
            active[type] ? active[type].call(this) : '';
        });
        //搜索
        $('#search').on('click', function () {
            var obj = $(this).parents('.layui-form-item');
            var val1 = obj.find('input[name="user"]').val(),
                val2 = obj.find('input[name="group"]').attr('data'),
					search_time=obj.find('input[name="val2"]').val(),
                val3 = obj.find('input[name="status"]').attr('data');
            layui.admin.reloads({
                search_text: val1,
                group_id: val2,
                status: val3,
                datemin: search_time.split(' - ')[0],
                datemax: search_time.split(' - ')[1]
            });
        });
        //导出
        $('#pexcel').on('click', function () {
            var obj = $(this).parents('.layui-form-item');
            var val1 = obj.find('input[name="user"]').val(),
                val2 = obj.find('input[name="group"]').attr('data'),
					search_time=obj.find('input[name="val2"]').val(),
                val3 = obj.find('input[name="status"]').attr('data');
            layui.admin.excel(table, 'agents/list',
                {
                    search_text: val1,
                    group_id: val2,
                    status: val3,
                    datemin: search_time.split(' - ')[0],
                    datemax: search_time.split(' - ')[1]
                }, '');
        });
    });

    function previewImg(obj) {
        var img = new Image();
        img.src = obj.src;
        //var height = img.height + 50; // 原图片大小
        //var width = img.width; //原图片大小
        var imgHtml = "<img src='" + obj.src + "' width='auto' height='auto'/>"; 
        var width = 'auto';
        var height = 'auto';
          
        //弹出层
        layer.open({
            type: 1,
            shade: 0.8,
            offset: 'auto',
            area: [width, height],  // area: [width + 'px',height+'px']  //原图显示
            shadeClose: true,
            scrollbar: false,
            title: "图片预览", //不显示标题  
            content: imgHtml, //捕获的元素，注意：最好该指定的元素要存放在body最外层，否则可能被其它的相对元素所影响  
            cancel: function () {
                //layer.msg('捕获就是从页面已经存在的元素上，包裹layer的结构', { time: 5000, icon: 6 });  
            }
        });
    }
</script>
